<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script>-->
<!--var name = "windowName";-->

<!--function a() {-->
<!--var name = "linqinghu";  // 这个name 在函数a 作用域内；-->
<!--console.log(this.name);//这个this 指向 函数a  ;函数a 的 this -&ndash;&gt;window-->
<!--console.log(name);-->
<!--console.log('inner' + this);-->
<!--}-->

<!--a();-->
<!--console.log("outer" + this);-->
<!--</script>-->

<!--<script>-->
<!--var name = "windowName";-->
<!--var a={-->
<!--name:'linqinghu',-->
<!--fn:function () {-->
<!--console.log(this.name);  //这个this -> a 对象的-->
<!--}-->
<!--}-->
<!--a.fn();-->
<!--</script>-->

<!--<script>-->
  <!--var name = "windowName";-->
  <!--var a = {-->
    <!--//name: 'linqinghu',-->
    <!--fn: function () {-->
      <!--console.log(this.name);-->
    <!--}-->
  <!--}-->

  <!--window.a.fn();-->
<!--</script>-->

<!--<script>-->
  <!--var name = "windowName";-->
  <!--var a ={-->
    <!--name:null,-->
    <!--fn:function () {-->
      <!--console.log(this.name);-->
    <!--}-->
  <!--}-->
  <!--var f = a.fn;-->

  <!--f();-->
<!--</script>-->

<!--<script>-->
  <!--var name = 'windowName';-->
  <!--function fn() {-->
    <!--var name = 'linqinghu';-->
    <!--innerFunction();-->
    <!--function innerFunction() {-->
      <!--console.log(this.name); //这个this  就是window 调用了-->
    <!--}-->
  <!--}-->

  <!--fn();-->
<!--</script>-->

<!--<script>-->
  <!--// 使用 ES6 的箭头函数-->
  <!--// 在函数内部使用 _this = this-->
  <!--// 使用 apply、call、bind-->
  <!--// new 实例化一个对象-->

  <!--var name = "windowName";-->
  <!--var a= {-->
    <!--name:'linqinghu',-->
    <!--func1:function () {-->
      <!--console.log(this.name);-->
    <!--},-->
    <!--func2:function(){-->
      <!--setTimeout(function () {-->
        <!--this.func1()  //setTimeout this->指向的是window-->
      <!--},100)-->
    <!--}-->
  <!--}-->

  <!--a.func2()-->


<!--</script>-->


<!--<script>-->
  <!--var name = "windowsName";-->

  <!--var a = {-->
    <!--name : "Cherry",-->

    <!--func1: function () {-->
      <!--console.log(this.name)-->
    <!--},-->

    <!--func2: function () {-->
      <!--setTimeout( () => {-->
        <!--this.func1()-->
      <!--},100);-->
    <!--}-->

  <!--};-->

  <!--a.func2()     // Cherry-->
<!--</script>-->


<!--<script>-->
  <!--var name = "windowsName";-->

  <!--var a = {-->

    <!--name : "Cherry",-->

    <!--func1: function () {-->
      <!--console.log(this.name)-->
    <!--},-->

    <!--func2: function () {-->
      <!--var _this = this;-->
      <!--setTimeout( function() {-->
        <!--_this.func1()-->
      <!--},100);-->
    <!--}-->

  <!--};-->

  <!--a.func2()       // Cherry-->
<!--</script>-->


<script>
  var a = {
    name:'linqinghu',
    func1:function () {
      console.log(this.name);
    },
    func2:function () {
      setTimeout(function () {
        this.func1()
      }.apply(a),100)
    }
  }
  a.func2()
</script>
<script>
  var a = {
    name:'linqinghu',
    func1:function () {
      console.log(this.name);
    },
    func2:function () {
      setTimeout(function () {
        this.func1()
      }.call(a),100)
    }
  }
  a.func2()
</script>

</body>
</html>